import { Button, Card, InputNumber, message, Radio } from 'antd';
import { connect } from 'dva';
import PropTypes from 'prop-types';
import React, { PureComponent } from 'react';

const mapStateToProps = (state: any) => ({});

const rules = [
  { min: 1, max: 30, step: 1 },
  { min: 1, max: 24, step: 1 },
  { min: 5, max: 60, step: 1 },
];

class FenceWarningConfig extends PureComponent<any, any> {
  static contextTypes = {
    permissions: PropTypes.array,
    dicData: PropTypes.array,
  };
  constructor(props: any) {
    super(props);
    this.state = {
      saveLoading2: false,
      loading2: false,
      value2: 1,
      interval: 1,
    };
  }

  componentDidMount() {
    const { dispatch } = this.props;
    this.setState({
      loading2: true,
    });

    dispatch({
      type: 'fenceWarningConfig/getData',
      payload: { url: '/electricfence/getwarningfrequency' },
      callback: (res: any) => {
        this.setState({
          value2: res.data.unit || 1,
          interval: res.data.value || 1,
        });
      },
    }).finally(() => this.setState({ loading2: false }));
  }

  render() {
    return (
      <Card title="预警推送频率" headStyle={{ fontWeight: 'bold' }} loading={this.state.loading2}>
        <Radio.Group
          disabled={false}
          options={[
            { label: '按天', value: 1 },
            { label: '按小时', value: 2 },
            { label: '按分钟', value: 3 },
          ]}
          value={this.state.value2}
          onChange={e => {
            let interval = this.state.interval;

            if (e.target.value === 1 && this.state.interval > 30) {
              interval = 30;
            } else if (e.target.value === 2 && this.state.interval > 24) {
              interval = 24;
            }
            this.setState({ value2: e.target.value, interval: interval });
          }}
        />
        <InputNumber
          max={rules[this.state.value2 - 1].max}
          min={rules[this.state.value2 - 1].min}
          step={rules[this.state.value2 - 1].step}
          value={this.state.interval}
          keyboard={false}
          onChange={e => {
            this.setState({ interval: e });
          }}
        />
        <div style={{ marginRight: 37, display: 'inline-block' }} />
        <Button
          size="small"
          type="primary"
          loading={this.state.saveLoading2}
          onClick={() => {
            this.setState({ saveLoading2: true });
            this.props
              .dispatch({
                type: 'fenceWarningConfig/postObj',
                payload: {
                  url:
                    '/electricfence/savewarningfrequency?unit=' +
                    this.state.value2 +
                    '&value=' +
                    this.state.interval,
                },
                callback: (res: any) => {
                  message.success('更新成功');
                },
              })
              .finally(() => this.setState({ saveLoading2: false }));
          }}
        >
          更新
        </Button>
      </Card>
    );
  }
}
export default connect(mapStateToProps)(FenceWarningConfig);
